import { PageContainer } from '@ant-design/pro-components';
import {
  Button,
  Card,
  Col,
  DatePicker,
  Form,
  Input,
  Modal,
  Row,
  Select,
  Table,
  Tag,
  Typography,
} from 'antd';
import dayjs from 'dayjs';
import { cloneDeep } from 'lodash';
import React, { useState } from 'react';

const dataSource = [
  {
    jianshi: 'A区201',
    zjfqf: '巡控A手动点名',
    zhdmsj: '15:00',
    qingkuang: '缺1人',
  },
  {
    jianshi: 'A区101',
    zjfqf: '每日早晨点名计划',
    zhdmsj: '08:00',
    qingkuang: '到齐',
  },
  {
    jianshi: 'A区201',
    zjfqf: '每日早晨点名计划',
    zhdmsj: '08:00',
    qingkuang: '到齐',
  },
  {
    jianshi: 'A区201',
    zjfqf: '每日早晨点名计划',
    zhdmsj: '08:00',
    qingkuang: '到齐',
  },
  {
    jianshi: 'A区201',
    zjfqf: '每日早晨点名计划',
    zhdmsj: '08:00',
    qingkuang: '到齐',
  },
];
const Admin: React.FC = () => {
  const [data, setData] = useState(dataSource);
  const [open, setOpen] = useState(false);
  const [isEdit, setIsEdit] = useState(false);
  const [editRow, setEditRow] = useState(null);
  const [form] = Form.useForm();

  const editDataAdapter = (values) => {
    const nValues: any = {};
    Object.keys(values).forEach((key) => {
      if (key?.indexOf('time') !== -1) {
        nValues[key] = dayjs(values[key], 'YYYY-MM-DD hh:mm:ss');
      } else {
        nValues[key] = values[key];
      }
    });
    return nValues;
  };

  const onOkAdapter = (values) => {
    const nValues: any = {};
    Object.keys(values).forEach((key) => {
      if (key?.indexOf('time') !== -1) {
        nValues[key] = values[key]?.format('YYYY-MM-DD hh:mm:ss');
      } else {
        nValues[key] = values[key];
      }
    });
    return nValues;
  };

  const handleEdit = (record: any) => {
    setIsEdit(true);
    const nValues = editDataAdapter(record);
    setOpen(true);
    console.log('😈nValues', nValues);
    form.setFieldsValue(nValues);

    setEditRow(record);
  };

  const handleOk = () => {
    if (isEdit) {
      form.validateFields().then((values) => {
        console.log('😈values', values);
        const nValues = onOkAdapter(values);
        const nData = cloneDeep(data);
        nData[editRow.index] = { index: editRow.index, ...nValues };
        console.log('😈nValues', nValues);
        setData(nData);
        setOpen(false);
        form.resetFields();
      });

      return;
    }

    form.validateFields().then((values) => {
      const nValues = onOkAdapter(values);
      setData([...data, { index: data.length, ...nValues }]);
      setOpen(false);
      form.resetFields();
    });
  };

  const handleCancel = () => {
    form.resetFields();
    setOpen(false);
  };

  const columns = [
    {
      title: '监室',
      width: 100,
      dataIndex: 'jianshi',
      key: 'jianshi',
    },
    {
      title: '最近发起方',
      width: 100,
      dataIndex: 'zjfqf',
      key: 'zjfqf',
      // render: (text) => <a>{text}</a>,
    },
    {
      width: 100,
      title: '最后点名时间',
      dataIndex: 'zhdmsj',
      key: 'zhdmsj',
    },
    {
      width: 100,
      title: '情况',
      dataIndex: 'qingkuang',
      key: 'qingkuang',
      render: (_) => {
        if (_ !== '到齐') return <Tag color="red">{_}</Tag>;

        return <Tag color="green">{_}</Tag>;
      },
    },
    {
      title: '操作',
      key: 'action',
      width: 60,
      render: (_, record) => (
        <Row gutter={10}>
          <Col>
            <Button type="primary">详情</Button>
          </Col>
          {/* <Col>
            <a>会见审核</a>
          </Col>
          <Col>
            <a>分派会见室</a>
          </Col>
          <Col>
            <a>会见结束</a>
          </Col> */}
        </Row>
      ),
    },
  ];

  return (
    <PageContainer>
      <Modal title={isEdit ? '编辑' : '新增'} open={open} onOk={handleOk} onCancel={handleCancel}>
        <Card>
          <Form form={form} labelCol={{ span: 7 }} wrapperCol={{ span: 18 }}>
            {columns.map((item) => {
              if (item.key === 'action') return null;

              if (item.options)
                return (
                  <Form.Item label={item.title} name={item.key} key={item.key}>
                    <Select mode={item.mode || null}>
                      {item.options?.map((item) => (
                        <Select.Option key={item.value}>{item.label}</Select.Option>
                      ))}
                    </Select>
                  </Form.Item>
                );

              if (item.key?.indexOf('time') !== -1)
                return (
                  <Form.Item
                    rules={[{ required: true, message: '请选择' }]}
                    label={item.title}
                    name={item.key}
                    key={item.key}
                  >
                    <DatePicker picker="time" showTime format="YYYY-MM-DD hh:mm:ss"></DatePicker>
                  </Form.Item>
                );
              return (
                <Form.Item
                  rules={[{ required: true, message: '请输入' }]}
                  label={item.title}
                  name={item.key}
                  key={item.key}
                >
                  <Input></Input>
                </Form.Item>
              );
            })}
          </Form>
        </Card>
      </Modal>
      <Card>
        {/* <Row className="mb10">
          <Button
            type="primary"
            onClick={() => {
              setOpen(true);
              setIsEdit(false);
            }}
          >
            新增
          </Button>
        </Row> */}
        <Typography.Title level={2} style={{ textAlign: 'center' }}>
          <Table columns={columns} dataSource={data}></Table>
        </Typography.Title>
      </Card>
    </PageContainer>
  );
};

export default Admin;
